<template>
	<view class="fun-flex-col page">
		<view class="fun-flex-col fun-items-center hold-bg">
			<view>
				<text class="font_2">{{investInfo.productValue}}</text>
				<text class="font_3 text_4">USD</text>
			</view>

			<view class="fun-flex-row fun-justify-between fun-items-center text-wrapper">
				<text class="font_4 text_5">Pre-fee Value</text>
				<image src="@/static/home/tips.png" @click="showModal = true"></image>
			</view>

			<view class="fun-flex-row fun-justify-between fun-items-center list-wrap">
				<view class="list fun-flex-col fun-items-center">
					<text class="font_5 text_6">Principal</text>
					<text class="font list-val">{{investInfo.productAmount}}</text>
				</view>

				<view class="list fun-flex-col fun-items-center">
					<text class="font_5 text_7">Yesterday’s Return</text>
					<text class="font list-val">{{investInfo.productYesterdayProfit}}</text>
				</view>

				<view class="list fun-flex-col fun-items-center">
					<text class="font_5 text_8">Cumulative Return</text>
					<text class="font list-val">{{investInfo.productTotalProfit}}</text>
				</view>
			</view>
		</view>

		<text class="font text_9">My Investment Accounts</text>

		<view class="group_2">
			<view class="fun-flex-col list-item mt-11" v-for="(item,index) in holdList" :key="item.id"
				@click="toDetail(item)">
				<text class="font_6 text_10">{{item.product}}</text>
				<view class="fun-flex-row fun-items-center group_3">
					<text class="font_2 text_11">{{item.seedmoney + item.tradeprofit}}</text>
					<view class="tag" v-if='item.status == 1'>Purchase</view>
					<view class="tag" v-if='item.status == 2'>Holding</view>
					<view class="tag" v-if='item.status == 3'>In Selttlement</view>
				</view>
				<view class="fun-flex-row fun-justify-between group_4 equal-division">
					<view class="fun-flex-col fun-items-start equal-division-item">
						<text class="font_4">Yield:</text>
						<text class="fun-mt-12 font_3">{{item.profitrate}}%</text>
					</view>
					<view class="fun-flex-col fun-items-start group_5 equal-division-item">
						<text class="font_4">Return:</text>
						<text class="fun-mt-12 font_3">{{item.tradeprofit}}</text>
					</view>
					<view class="fun-flex-col fun-items-start group_5 equal-division-item">
						<text class="font_4">Principal:</text>
						<text class="fun-mt-12 font_3">{{item.seedmoney}}</text>
					</view>
				</view>
				<view class="divider"></view>
				<view class="fun-flex-row fun-items-center fun-justify-between order-wrap">
					<text class="font_4">Order No.:{{item.orderNo}}</text>
					<text class="time">Expiry date:{{UTILS.setDateFormat(item.settlementdate)}}</text>
				</view>
			</view>
		</view>
		
		<holdModal v-if='showModal' @close="showModal = false"></holdModal>
	</view>
</template>

<script>
	import holdModal from "@/components/holdModal"
	import {getTimeZone} from "@/common/js/func.js"
	import {invest,holdings} from "@/api/home.js"
	export default {
		data() {
			return {
				queryData:{
					page:1,
					limit:10,
					status:999,
					timeZone:8
				},
				showModal:false,
				investInfo:{},
				holdList:[]
			};
		},
		
		onLoad() {
			this.queryData.timeZone = getTimeZone() || 8;
			this.getInvestInfo()
			this.getHoldings()
		},

		methods: {
			getInvestInfo(){
				invest().then(res => {
					if(res.code == 0){
						this.investInfo = res.data || {};
					}
					else{
						this.UTILS.logStr(res.msg || "Failed to retrieve data")
					}
				})
			},
			getHoldings(){
				holdings(this.queryData).then(res => {
					if(res.code == 0){
						this.holdList = res.data || [];
					}
					else{
						this.UTILS.logStr(res.msg || "Failed to retrieve data")
					}
				})
			},
			toDetail(item) {
				uni.navigateTo({
					url: '/pages/home/holdingDetail?orderId='+encodeURIComponent(item.id)+'&orderNo='+encodeURIComponent(item.orderNo)
				})
			},
		},
		
		components:{
			holdModal
		}
	};
</script>

<style scoped lang="scss">
	.ml-5 {
		margin-left: 10rpx;
	}

	.mt-11 {
		margin-top: 22rpx;
	}

	.ml-9 {
		margin-left: 18rpx;
	}

	.page {
		padding: 32rpx 28rpx;
		background-color: #ffffff;
		width: 100%;
		overflow-y: auto;
		overflow-x: hidden;
		height: 100%;

		.hold-bg {
			width: 100%;
			background: url("@/static/home/invest_bg.png") no-repeat center;
			background-size: 100% 100%;
			padding: 28rpx 24px;
			padding-top: 40rpx;
			.list-wrap {
				width: 100%;
				.list {
					flex: auto;
				}
				.list-val{
					margin-top: 12rpx;
				}
			}
		}

		.font_5 {
			font-size: 24rpx;
			font-family: SF Pro Display;
			color: #000000;
		}

		.font_2 {
			font-size: 48rpx;
			font-family: SF Pro Display;
			font-weight: 700;
			color: #000000;
		}

		.font_3 {
			font-size: 28rpx;
			font-family: SF Pro Display;
			font-weight: 700;
			color: #51844d;
		}

		.text_4 {
			color: #7f7f7f;
			font-weight: unset;
			margin-left: 16rpx;
		}

		.text-wrapper {
			margin-top: 8rpx;
			margin-bottom: 40rpx;
			font-size: 24rpx;
			image{
				width: 30rpx;
				height: 30rpx;
				margin-left: 8rpx;
			}
		}

		.text_9 {
			margin-top: 32rpx;
			margin-bottom: 24rpx;
			color: #333333;
			font-weight: 600;
		}

		.group_2 {
			width: 100%;
			.list-item {
				padding: 24rpx;
				background-color: #ffffff;
				border-radius: 16rpx;
				border: solid 2rpx #f0f0f0;

				&:first-child {
					margin-top: 0;
				}

				.font_6 {
					font-size: 28rpx;
					font-family: SF Pro Display;
					font-weight: 700;
					color: #000000;
				}

				.group_3 {
					margin-top: 16rpx;
					.tag {
						padding: 8rpx;
						background: #E9FAF0;
						border-radius: 4rpx;
						margin-left: 24rpx;
						font-size: 20rpx;
						color: #51844D;
					}
					.hold{
						color:#51844D;
						background: #E9FAF0;
					}
					.purchase{
						background: #CA5456;
						color: #fff;
					}
					.selttle{
						background: #1A7B99;
						color: #fff;
					}
				}

				.group_4 {
					margin-top: 32rpx;
					width: 100%;

					.equal-division-item {
						flex: 1;
					}
				}

				.divider {
					margin: 24rpx 0;
					background-color: #00000033;
					height: 2rpx;
				}
				.order-wrap{
					letter-spacing: -0.8px;
				}
			}
		}

		.font {
			font-size: 32rpx;
			font-weight: 700;
			color: #000000;
		}
	}
</style>